<template>
  <div class="help-view">
    <!-- 页面标题 -->
    <div class="page-header"> </div>

    <!-- 搜索栏 -->
    <div class="search-container">
      <div class="search-box">
        <div class="i-carbon-search absolute left-4 top-3.5 text-lg text-gray-400"></div>
        <input type="text" placeholder="搜索帮助内容..." class="search-input" />
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="section">
      <h3 class="section-title">常见问题</h3>
      <div class="faq-list">
        <div
          v-for="(item, index) in faqItems"
          :key="index"
          class="faq-item"
          :class="{ active: activeQuestion === index }"
          @click="toggleQuestion(index)"
        >
          <div class="faq-question">
            <div class="faq-question-text">{{ item.question }}</div>
            <div
              class="i-carbon-chevron-down text-gray-400 transition-transform"
              :class="{ 'rotate-180': activeQuestion === index }"
            ></div>
          </div>
          <div class="faq-answer" :class="{ hidden: activeQuestion !== index }">
            {{ item.answer }}
          </div>
        </div>
      </div>
    </div>

    <!-- 视频教程 -->
    <div class="section">
      <h3 class="section-title">视频教程</h3>
      <div class="tutorial-grid">
        <div v-for="(tutorial, index) in tutorials" :key="index" class="tutorial-card">
          <div class="tutorial-thumbnail">
            <img :src="tutorial.thumbnail" alt="视频缩略图" class="h-full w-full object-cover" />
            <div class="play-button">
              <div class="i-carbon-play-filled"></div>
            </div>
          </div>
          <div class="tutorial-content">
            <h4 class="tutorial-title">{{ tutorial.title }}</h4>
            <p class="tutorial-desc">{{ tutorial.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系客服 -->
    <div class="contact-section">
      <h3 class="section-title">联系客服支持</h3>
      <p class="contact-desc">没有找到您需要的答案？我们的客服团队随时为您提供帮助。</p>
      <div class="contact-methods">
        <button class="contact-method">
          <div class="i-carbon-email mb-2 text-2xl"></div>
          <span>发送邮件</span>
        </button>
        <button class="contact-method">
          <div class="i-carbon-chat mb-2 text-2xl"></div>
          <span>在线聊天</span>
        </button>
        <button class="contact-method">
          <div class="i-carbon-phone mb-2 text-2xl"></div>
          <span>电话支持</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // 当前展开的问题索引
  const activeQuestion = ref(-1)

  // 切换问题展开/收起状态
  const toggleQuestion = (index: number) => {
    activeQuestion.value = activeQuestion.value === index ? -1 : index
  }

  // FAQ数据
  const faqItems = [
    {
      question: '如何转换视频格式？',
      answer:
        '在主页点击"开始新的转换"，然后拖放或选择要转换的视频文件。选择目标格式和设置后，点击"开始转换"按钮即可。'
    },
    {
      question: '支持哪些视频格式？',
      answer:
        '我们支持大多数常见的视频格式，包括 MP4, AVI, MOV, MKV, FLV, WMV, 3GP 等。您可以在转换时选择各种输出格式。'
    },
    {
      question: '转换视频会损失质量吗？',
      answer:
        '转换过程中可能会有一些质量损失，但我们使用高质量的编解码器来最大程度地保持原始视频质量。您可以在设置中选择不同的质量选项来平衡文件大小和视频质量。'
    },
    {
      question: '免费版和专业版有什么区别？',
      answer:
        '免费版提供基本的格式转换功能，而专业版提供批量处理、更多高级设置、无水印输出、优先技术支持以及更快的转换速度等功能。'
    },
    {
      question: '如何提高转换速度？',
      answer:
        '要提高转换速度，您可以降低输出视频质量、选择较小的分辨率，或在设置中调整性能选项。专业版用户还可以使用硬件加速功能，大幅提升转换速度。'
    }
  ]

  // 视频教程数据
  const tutorials = [
    {
      title: '入门指南：基本转换操作',
      description: '了解如何使用应用进行基本的视频格式转换',
      thumbnail: 'https://placeholder.pics/svg/600x300/DEDEDE/555555/视频教程1'
    },
    {
      title: '高级功能：批量处理与自定义设置',
      description: '掌握批量转换和高级设置调整技巧',
      thumbnail: 'https://placeholder.pics/svg/600x300/DEDEDE/555555/视频教程2'
    }
  ]
</script>

<style lang="scss">
  .help-view {
    height: 100%;
    padding: 1.5rem 2rem;
    overflow-y: auto;
  }

  .page-header {
    margin-bottom: 1.5rem;
  }

  .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
  }

  .search-container {
    margin-bottom: 2rem;
  }

  .search-box {
    position: relative;
    width: 100%;
  }

  .search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    font-size: 1rem;
    color: #1f2937;
    outline: none;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;

    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }
  }

  .section {
    margin-bottom: 2.5rem;
  }

  .section-title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
  }

  .faq-list {
    overflow: hidden;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
  }

  .faq-item {
    cursor: pointer;
    transition: background-color 0.2s;

    &:not(:last-child) {
      border-bottom: 1px solid #f3f4f6;
    }

    &:hover {
      background-color: #f9fafb;
    }
  }

  .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }

  .faq-question-text {
    font-weight: 500;
    color: #1f2937;
  }

  .faq-answer {
    padding: 0 1rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
  }

  .tutorial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;

    @media (width <= 640px) {
      grid-template-columns: 1fr;
    }
  }

  .tutorial-card {
    overflow: hidden;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 10px 25px rgb(0 0 0 / 8%);
      transform: translateY(-4px);

      .play-button {
        background-color: rgb(102 126 234 / 90%);
        transform: translate(-50%, -50%) scale(1.1);
      }
    }
  }

  .tutorial-thumbnail {
    position: relative;
    height: 10rem;
    background-color: #e5e7eb;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: white;
    background-color: rgb(102 126 234 / 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
  }

  .tutorial-content {
    padding: 1rem;
  }

  .tutorial-title {
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: #1f2937;
  }

  .tutorial-desc {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .contact-section {
    padding: 1.5rem;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
  }

  .contact-desc {
    margin-bottom: 1.5rem;
    color: #6b7280;
  }

  .contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;

    @media (width <= 640px) {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-weight: 500;
    color: #4b5563;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    transition: all 0.2s ease;

    &:hover {
      background-color: #f3f4f6;
    }
  }
</style>
